<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>采集器档案</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .tab-title {
            margin-top: 20px;
            text-align: left;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }


    </style>
</head>
<body>
<div class="page" id="page-elesafe">
    <div :hidden="isShow">
        <div class="page-title">设备管理 › 采集器档案</div>
        <div class="page-main">
            <el-row>
                <el-col :span="24">
                    <div class="main-head">
                        <el-form :inline="true">
                            <el-form-item label="">
                                <el-input v-model="emuName" placeholder="请输入采集器名称关键字" style="width: 220px"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="searchEmu" style="background: #578BBB">查询</el-button>
                                <!--                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">-->
                                <el-button type="primary" @click="addClick" style="background: #5BBD8B">新增</el-button>
                                <!--                            </el-tooltip>-->
                            </el-form-item>
                        </el-form>
                    </div>

                    <el-table border stripe style="width: 100%" :data="EmuData" height="600">
                        <el-table-column prop="EMU_ID" label="采集器编号" align="center">
                        </el-table-column>
                        <el-table-column prop="EMU_NAME" label="采集器名称" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button @click="settingClick(scope.row)" round size="small"
                                           icon="el-icon-setting"></el-button>
                                <el-button @click="handleClick(scope.row)" round size="small"
                                           icon="el-icon-edit"></el-button>
                                <el-button round icon="el-icon-delete" size="small"
                                           @click="delClick(scope.row,'collector')"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page-footer" style="left:auto">
                        <el-pagination background layout="prev, pager, next" :total="totalCount"
                                       :current-page.sync="currentPage" @current-change="onChangePage">
                        </el-pagination>
                    </div>
                </el-col>

            </el-row>
            <el-dialog :title="editMod?'编辑采集器':'新增采集器'" :visible.sync="dialogFormVisible" center width="30%"
                       :show-close="false">
                <el-form :model="collectorForm" ref="collectorForm">
                    <el-form-item label="采集器编号"
                                  prop="EMU_ID" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'编号不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="collectorForm.EMU_ID" autocomplete="off" placeholder="16位长度字符"
                                  :disabled="editMod"></el-input>
                    </el-form-item>
                    <el-form-item label="采集器名称" prop="EMU_NAME" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="collectorForm.EMU_NAME" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="终端协议" prop="EMU_Protocol" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'终端协议不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="collectorForm.EMU_Protocol" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="区域" prop="EMU_ZoneId" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'区域不能为空!',trigger:'blur'}
                            ]">
                        <el-select v-model="collectorForm.EMU_ZoneId" placeholder="请选择区域" style="width: 100%;">
                            <el-option
                                    v-for="item in zoneList"
                                    :key="item.zone_id"
                                    :label="item.zone_name"
                                    :value="item.zone_id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelClick('collectorForm')" tyle="background: #7eb8b0">取 消</el-button>
                    <el-button @click="submitClick('collectorForm')" style="background:#f9b317">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
    <div :hidden="!isShow">
        <div class="page-title">设备管理 › 采集器档案 › 仪表管理</div>
        <br class="page-main">
        <el-button @click="goBack" icon="el-icon-caret-left" style="margin:40px 0 0 30px"></el-button>
        </br>
        <el-row>
            <el-col :span="24" style="padding: 30px">
                <div class="main-head">
                    <p class="tab-title">仪表管理</p>
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="devName" placeholder="请输入设备名称关键字" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="searchMeter" style="background: #578BBB">查询</el-button>
                            <el-button type="primary" @click="addMeter" style="background: #5BBD8B">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table border stripe style="width: 100%" :data="deviceData"  height="600">
                    <el-table-column prop="DeviceID" label="设备编号" align="center">
                    </el-table-column>
                    <el-table-column prop="DeviceName" label="设备名称" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceType2" label="设备类型" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceModel" label="设备型号" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceType" label="能耗类型" align="center">
                    </el-table-column>
                    <el-table-column prop="Ratio1" label="电流互感" align="center">
                    </el-table-column>
                    <el-table-column prop="Ratio2" label="电压互感" align="center">
                    </el-table-column>
                    <el-table-column prop="RatedPower" label="额定功率" align="center">
                    </el-table-column>
                    <el-table-column prop="DeviceAddress" label="通讯地址" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceLocation" label="安装位置" align="center">
                    </el-table-column>
                    <el-table-column prop="device_port" label="端口号" align="center">
                    </el-table-column>
                    <el-table-column prop="openflag" label="是否启用" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.openflag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.openflag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceimportant" label="是否重点设备" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.deviceimportant == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.deviceimportant == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="device_masterflag" label="是否为总表" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.device_masterflag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.device_masterflag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="195px" align="center" fixed="right">
                        <template slot-scope="scope">
                            <!--                            <el-button @click="attrSetting(scope.row)" round size="mini" round-->
                            <!--                                       icon="el-icon-setting"></el-button>-->
                            <el-button @click="editSetting(scope.row)" round size="mini" round
                                       icon="el-icon-edit"></el-button>
                            <el-button round icon="el-icon-delete" size="mini" round
                                       @click="delClick(scope.row,'meter')"></el-button>

                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑仪表设备':'新增仪表设备'" width="30%" :visible.sync="dialogMeterVisible" center
                   :show-close="false">
            <el-form :model="deviceForm" ref="deviceForm">
                <el-form-item label="设备编号" prop="DeviceID" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'编号不能为空!',trigger:'blur'}
                            ]">

                    <el-input v-model="deviceForm.DeviceID" autocomplete="off" placeholder="16位长度字符"
                              :disabled="editMod"></el-input>
                </el-form-item>
                <el-form-item label="设备名称"
                              prop="DeviceName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.DeviceName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备类型" prop="deviceType2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'类型不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceType2" placeholder="请选择类型" style="width: 100%;">
                        <el-option
                                v-for="item in devType"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备型号" prop="deviceModel" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'型号不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceModel" placeholder="请选择型号" style="width: 100%;">
                        <el-option
                                v-for="item in devMod"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能耗类型" prop="deviceType" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'类型不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceType" placeholder="请选择类型" style="width: 100%;">
                        <el-option
                                v-for="item in energyType"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="电流互感"
                              prop="Ratio1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.Ratio1" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="电压互感"
                              prop="Ratio2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.Ratio2" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="额定功率"
                              prop="RatedPower" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.RatedPower" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通讯地址"
                              prop="DeviceAddress" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.DeviceAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="安装位置"
                              prop="deviceLocation" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.deviceLocation" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="端口号"
                              prop="device_port" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="deviceForm.device_port" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="openflag" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.openflag" placeholder="--请选择--">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否重点设备" prop="deviceimportant" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceimportant" placeholder="--请选择--">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为总表" prop="device_masterflag" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.device_masterflag" placeholder="--请选择--">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('deviceForm')" style="background: #7eb8b0">取 消</el-button>
                <el-button @click="submitClick('deviceForm')" style="background:#f9b317">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog title="属性配置" :visible.sync="dialogSettingVisible" width="25%" center :show-close="false">
            <el-form :model="settingForm" ref="settingForm">
                <el-form-item label="设备名称" prop="name" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="settingForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="高限1" prop="high1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="settingForm.high1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="高限2" prop="high2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="settingForm.high2" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="底限1" prop="low1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="settingForm.low1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="底限2" prop="low2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="settingForm.low2" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('settingForm')" style="background: #7eb8b0">取 消</el-button>
                <el-button @click="submitClick('settingForm')" style="background:#f9b317">确 定</el-button>
            </div>
        </el-dialog>
        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page.sync="currentPage"
                           @current-change="onChangePage">
            </el-pagination>
        </div>
    </div>


</div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-elesafe',
        data: {
            formLabelWidth: '120px',
            day: '',
            EmuData: '',
            proList: '',
            deviceData: '',
            dialogFormVisible: false,
            dialogMeterVisible: false,
            dialogSettingVisible: false,
            currentPage: 1,
            currentEmuId: '',
            currentProNo: '',
            currentZoneId: '',
            emuName: '',
            devName: '',
            zoneList: '',
            collectorForm: {
                projectName: '',
                EMU_ID: '',
                EMU_NAME: '',

            },
            deviceForm: {},
            settingForm: {},
            totalCount: 0,
            isShow: false,
            editMod: '',
            devType: '',
            energyType: '',
            devMod: '',
            emuProNo: '',
            tooltip: false,
        },
        methods: {
            searchEmu: function () {
                this.getEmuData({EMU_NAME: this.emuName, EMU_ProjectNo: SiteConfig.account.projectNo});
            },
            searchMeter: function () {
                this.getDeviceData({EMUID: this.currentEmuId, DeviceName: this.devName});
            },
            selectTrigger: function (proNo) {

            },
            userNode: function (data) {


            },
            addMeter: function () {
                this.deviceForm = {};
                this.editMod = false;
                this.dialogMeterVisible = true;
            },
            editSetting: function (data) {
                this.editMod = true;
                this.dialogMeterVisible = true;
                this.deviceForm = data;
                this.deviceForm.openflag = this.deviceForm.openflag + "";
            },
            attrSetting: function () {
                this.dialogSettingVisible = true;
            },
            aa: function (data) {
            },
            goBack: function () {
                this.isShow = false;
                this.currentPage = 1;
            },
            addClick: function () {
                if (this.emuProNo == '') {
                    this.$message.error('请选择项目');
                    return;
                }
                this.collectorForm = {};
                this.editMod = false;
                this.dialogFormVisible = true;
            },
            handleClick(data) {
                this.editMod = true;
                this.dialogFormVisible = true;
                this.collectorForm = data;
                console.log(this.collectorForm);
            },
            delClick(data, flag) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if (flag == 'collector') {
                        HttpUtil.get('Emu/Delete', {EMU_ID: data.EMU_ID}).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getEmuData({emU_ProjectNo: SiteConfig.account.projectNo});
                        });
                    } else if (flag == 'meter') {
                        HttpUtil.get('Device/Delete', {Id: data.Id}).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getDeviceData({EMUID: this.currentEmuId});
                        });
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName) {
                this.$refs[formName].validate((valid) => {
                    this.collectorForm.emU_ProjectNo = this.emuProNo;
                    if (valid) {
                        if (this.editMod) {
                            // 修改
                            switch (formName) {
                                case 'collectorForm':

                                    console.log(this.collectorForm);

                                    HttpUtil.get('Emu/Update', this.collectorForm).success((res) => {
                                        this.$message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                        this.getEmuData({emU_ProjectNo: SiteConfig.account.projectNo});
                                        this.cancelClick(formName);
                                    });
                                    break;
                                case 'deviceForm':
                                    console.log(this.deviceForm);
                                    HttpUtil.get('Device/Update', this.deviceForm).success((res) => {
                                        this.$message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                        this.getDeviceData({EMUID: this.currentEmuId});
                                        this.cancelClick(formName);
                                    })
                            }
                        } else {
                            //添加
                            switch (formName) {
                                case 'collectorForm':
                                    console.log(this.collectorForm);
                                    HttpUtil.get('Emu/Add', this.collectorForm).success((res) => {
                                        this.$message({
                                            type: 'success',
                                            message: '添加成功'
                                        });
                                        this.getEmuData({emU_ProjectNo: SiteConfig.account.projectNo});
                                        this.cancelClick(formName);
                                    });
                                    break;
                                case 'deviceForm':
                                    this.deviceForm.EMUID = this.currentEmuId;
                                    this.deviceForm.ProjectNo = SiteConfig.account.projectNo;
                                    this.deviceForm.ZoneID = this.currentZoneId;
                                    HttpUtil.get('Device/Add', this.deviceForm).success((res) => {
                                        this.$message({
                                            type: 'success',
                                            message: '添加成功'
                                        });
                                        this.getDeviceData({EMUID: this.currentEmuId});
                                        this.cancelClick(formName);
                                    });
                                    break;
                            }
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            onChangePage(page) {
                if (this.isShow) {
                    this.getDeviceData({
                        pageno: page,
                        pagesize: 10,
                        EMUID: this.currentEmuId,
                        DeviceName: this.devName
                    });
                } else {
                    this.getEmuData({pageno: page, pagesize: 10, emU_ProjectNo: this.emuProNo});
                }
            },
            settingClick(data) {
                console.log(data);
                this.isShow = true;
                this.currentEmuId = data.EMU_ID;
                this.currentZoneId = data.EMU_ZoneId;
                this.currentProNo = data.emU_ProjectNo;
                this.getDeviceData({EMUID: data.EMU_ID});
                this.currentPage = 1;
            },
            cancelClick(formName) {
                this.$refs[formName].clearValidate()
                this.dialogFormVisible = false;
                this.dialogMeterVisible = false;
                this.dialogSettingVisible = false;
            },
            getEmuData(param) {
                HttpUtil.get('Emu/List', param).success((res) => {
                    this.EmuData = res.data;
                    this.totalCount = res.total;
                });
            },
            getDeviceData(param) {
                HttpUtil.get('Device/List', param).success((res) => {
                    res.data.EMUID = param.EMU_ID;
                    this.deviceData = res.data;
                    this.totalCount = res.total;
                })
            }
        },
        created: function () {
            $('.page').show();
        },
        mounted: function () {

            this.day = TimeUtil.convertToString(new Date()).substr(0, 10);
            this.emuProNo = SiteConfig.account.projectNo;
            this.getEmuData({emU_ProjectNo: SiteConfig.account.projectNo});
            HttpUtil.get('Zone/ListForProjectNo', {pagesize:100,ProjectNo: SiteConfig.account.projectNo}).success((res) => {
                this.zoneList = res.data;
            });

            HttpUtil.get('Project/List').success((res) => {
                this.proList = res.data;
            });
            HttpUtil.get('CodeController/List', {pid: "DeviceType2"}).success((res) => {
                this.devType = res.data;
            });
            HttpUtil.get('CodeController/List', {pid: "EnergyType"}).success((res) => {
                this.energyType = res.data;
            });
            HttpUtil.get('CodeController/List', {pid: "DeviceModule"}).success((res) => {
                this.devMod = res.data;
            });
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
